<template>
	<view>
		<view class="movie-position">
			<view class="position-text">{{info.name}}</view>
			<view class="position-item">
				<view class="item-texts">{{info.address}}</view>
				<view class="item-img-list">
					<image src="../../../static/movie/collection-icon.png" class="collion"></image>
					<image src="../../../static/movie/moivew-location.png" class="locaion-img"></image>
				</view>
			</view>
		</view>

		<view class="movieimg">
			<view class="info1img">
				<!-- <image :src="baseurl+info1.cover"></image> -->
				<image :src="info1.cover"></image>
			</view>

		</view>

		<view class="moive-name">{{info1.name}}</view>
		<view class="moive-info">总时长:{{info1.duration}}分钟 &ensp;|&ensp;语言:{{info1.language}}</view>

<!-- 		<view class="moive-tab-list">
			<view class="tabs-list-item" :class="{'tab-sel':index==tabIndexs}" v-for="(item,index) in cinemalist"
				:key="index" @click="getTimeTab(item,index)">
				{{item.playDate}}
				
				<view class="bottoms" v-if="index==tabIndexs"></view>
			</view>
		</view> -->

		<view class="moive-tab-list">
			<view class="tabs-list-item" >
				2024-4-3
				<view class="bottoms"></view>
			</view>
		</view>

		<view class="ticket-list" v-for="(item,index) in cinemalist" :key="index">
			<view class="">
				{{item.movieName}}
			</view>
			<view style="width: 79%;">
				<view class="ticet-left">
					<view style="display: flex;align-items: center;">
						<text class="left-time">{{item.startTime}}</text>
						
					</view>
					<view style="display: flex;align-items: center;">
						<view class="ret-price"><text>￥</text>{{item.price}}</view>
						
					</view>
				</view>
				<view class="ticet-left" style="margin-top: 20rpx;">
					<view class="ticet-booms">
						<text>{{item.endTime}}</text>
						<text style="margin-left: 25rpx;">{{item.roomName}}</text>
					</view>
					<view class="ticet-boom-ret">
					
						<view class="sheng-pirce">已售:{{item.saleNum}}张</view>
					</view>
				</view>
			</view>
			<view class="buy-btns"  @click="gotomovieseat(info.id)">购票</view>
		</view>

	</view>
</template>

<script>
	import {
		movieroom,
		theatretimes,
		moviedetail,
		filmdetail
	} from "../../../api/movieService.js"
	import{baseurl} from '../../../api/request.js';

	import {
		moviedetails,
		moviecinema,
		moviesessions
	} from "../../../mock/movie.js"

	export default {

		data() {
			return {
				tabIndexs: 0,
				cinemalist: [],
				testlist: [],
				info: {},
				info1: {},
				baseurl
			}
		},

		async onLoad(option) {

			let res0 = await movieroom()
			console.log("res0:==>",res0);
			let {
				id
			} = option

			let res = await theatretimes({
				//看电影 查询影片场次列表
				movieId: id
			})
			if (res.code == 200) {
				this.testlist = res.rows[0]
				console.log(this.testlist);
			} else {
			
				this.cinemalist = moviesessions().rows;
				console.log(this.cinemalist);
			
			}
			let res2 = await moviedetail(id)
			//看电影 获取影院信息详细信息
			console.log(res2);
			// let data = res2.data;
			// this.info = data;
			if (res2.code == 200) {
				// this.cinemalist = res1.rows;
				let data = res2.data;
				this.info = data;
			} else {

				let data = moviecinema().rows[0];
				this.info = data;
				console.log(this.info);

			}
			let res3 = await filmdetail(id)
			//看电影 获取影片信息详细信息
			console.log(res3);
			// let data1 = res3.data;
			// this.info1 = data1;
			if (res3.code == 200) {
				let data1 = res3.data;
				this.info1 = data1;
			} else {

				let data1 = moviedetails().rows[0];
				console.log(data1);
				this.info1 = data1;
				console.log(this.info1);
			}

		},

		methods: {
			getTimeTab(data, index) {

				console.log(data);

				if (this.tabIndexs != index) {
					this.tabIndexs = index

					this.testlist = data
				}
			},

			gotomovieseat(id) {
				console.log(id);
				uni.navigateTo({
					// url: "../movie/movieseat?id=" + id
					url:"/pages/movie/movieseat/movieseat?id="+id
				})
			}


		}
	}
</script>

<style lang="scss">
	.movie-position {
		padding: 30rpx 32rpx;
	}

	.position-text {
		color: #000;
		font-size: 32rpx;
		font-weight: 500;
	}

	.position-item {
		display: flex;
		margin-top: 10rpx;
	}

	.item-texts {
		color: #636775;
		font-size: 24rpx;
		width: 72%;
	}

	.item-img-list {
		margin-left: auto;
		display: flex;
	}

	.collion {
		width: 48rpx;
		height: 48rpx;
		margin-right: 50rpx;
	}

	.locaion-img {
		width: 44rpx;
		height: 44rpx;
	}

	.movieimg {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
	}

	.info1img {

		width: 90%;
		height: 300rpx;
	}

	.info1img image {
		width: 100%;

	}

	.moive-name {
		text-align: center;
		margin-top: 30rpx;
		color: #2D3039;
		font-size: 36rpx;
		font-weight: 600;
	}

	.moive-info {
		text-align: center;
		margin-top: 14rpx;
		color: #636775;
		font-size: 24rpx;
	}

	.moive-tab-list {
		margin-top: 40rpx;
		padding: 24rpx 12rpx;
		border-bottom: 2rpx solid #DFE0E2;
		overflow-x: auto;
		white-space: nowrap;
		width: auto;
		overflow-y: hidden;
	}

	.tabs-list-item {
		padding: 0rpx 20rpx;
		display: inline-block;
		position: relative;
		color: #636775;
		font-size: 28rpx;
	}

	.tab-sel {
		color: #FE602B !important;
		font-size: 28rpx;
		font-weight: 550;
	}

	.bottoms {
		position: absolute;
		bottom: -30rpx;
		right: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 52rpx;
		height: 8rpx;
		background-color: #FE602B;
		// border-radius: 5rpx 5rpx 0px 0px;
	}

	.ticket-list {
		margin: 0rpx 32rpx;
		padding: 38rpx 0rpx;
		border-bottom: 2rpx solid #E0E1E3;
		display: flex;
		align-items: center;
	}

	.ticet-left {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left-time {
		color: #2D3039;
		font-size: 42rpx;
	}

	.ret-price {
		color: #FE602B;
		font-size: 42rpx;
		font-weight: 550;
	}

	.ret-price text {
		font-size: 28rpx;
	}


	.ticet-booms {
		color: #A6A8AE;
		font-size: 24rpx;
	}

	.ticet-boom-ret {
		display: flex;
		align-items: center;
	}
	
	.sheng-pirce {
		color: #A6A8AE;
		font-size: 24rpx;
	}

	.buy-btns {
		width: 110rpx;
		height: 58rpx;
		text-align: center;
		line-height: 58rpx;
		background: linear-gradient(207deg, #FF9272 0%, #FC5421 100%);
		border-radius: 30rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		font-weight: 550;
		margin-left: auto;
	}
</style>